import React, { Component, createRef } from 'react'

import Test1 from '../components/Test1.jsx'
import Test2 from '../components/Test2.jsx'

const requireContext = require.context("../assets/imgs/", true, /\.jpg$/);
// const images = requireContext.keys().map(requireContext);
const images = requireContext.keys().map((item, index) => {
    return {
        id: index,
        imgurl: requireContext(item)
    }
});
console.log(images)

export default class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            count: 0,
            age: 18,
            username: '',
            checkbox: false
        }
        this.myRef = createRef();
    }
    componentDidMount() {
        // 挂载后调用且只调用一次
        console.log('componentDidMount')
        // console.log(this.textInput)
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        console.log('getDerivedStateFromProps', prevState)
        return null;
    }
    shouldComponentUpdate(nextProps, nextState) {
        // nextProps和nextProps的含义就是字面量的含义，代表更新之后的状态
        // 组件Props或者state改变时触发，true：更新，false：不更新
        console.log('shouldComponentUpdate', nextState)
        // if (this.state.count !== nextState.count || this.state.age !== nextState.age) {
        //     return true
        // }
        // return false
        return true
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log('getSnapshotBeforeUpdate', prevState)
        return null;
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        //（这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值）
        console.log('componentDidUpdate', prevState, snapshot)
    }

    addCount = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    normalCount = () => {
        this.setState((prevState, props) => {
            return {
                count: 3
            }
        })
    }
    addAge = (num) => {
        console.log(typeof num)
        this.setState({
            age: this.state.age + num
        })
    }
    // 如何优雅处理多个表单项
    handleInputChange = (event) => {
        let target = event.target;
        // 判断是文本框还是 checkbox复选框
        let value = target.name === 'checkbox' ? target.checked : target.value;
        let name = target.name;
        if (name === 'age') {
            value = parseInt(target.value)
        }
        this.setState({
            [name]: value
        });
    }
    // 获取表单
    getInputValue = () => {
        console.log(this.state)
    }
    // 获取子组件
    getChild = () => {
        // 父组件使用ref获取子组件数据
        console.log(this.myRef)
        // this.myRef.current.printA()
        // console.log( this.myRef.current.testObj )    
    }

    createMarkup = ()=> {
        return { 
            __html: `
                        <span style="color: red">1234</span>
                        <span style="color: green"}>5678</span>
                    `
        };
    }

    render() {
        // console.log('render')
        let { count, age, username } = this.state
        return (
            <>
                <h1>我是首页</h1>
                <p>count值：{count}</p>
                <button onClick={this.addCount}>点击+1</button>
                <button onClick={this.normalCount}>count不变</button>
                <h3>子组件</h3>
                <Test1 age={age} addAge={this.addAge} />
                <h3>批量引入图片</h3>
                {
                    images.map((img, index) => {
                        return <img src={img.imgurl} width='50%' alt='img' key={index} />
                    })
                }
                <label>
                    姓名:
                    <input
                        name="username"
                        type="text"
                        value={username}
                        onChange={this.handleInputChange} />
                </label>
                <br />
                <label>
                    年龄:
                    <input
                        name="age"
                        type="number"
                        value={age}
                        onChange={this.handleInputChange} />
                </label>
                <label>
                    爱好:
                    <input
                        name="checkbox"
                        type="checkbox"
                        checked={this.state.checkbox}
                        onChange={this.handleInputChange} />
                </label>
                <button onClick={this.getInputValue}>获取表单数据</button>
                <h3>ref使用方式</h3>
                <Test2 ref={this.myRef} a='1' b='2' />
                <button onClick={this.getChild}>获取子组件数据</button>
                <input type="text" placeholder='ref使用' ref={ input => this.textInput = input }/>
                <h3>innerHtml使用</h3>
                <div dangerouslySetInnerHTML={this.createMarkup()} />
            </>
        )
    }
}
